<template>
  <div class="front shopInfo">
    <div class="banner"
      :style="{backgroundImage:`url(${shopInfo.shopBackendImage?shopInfo.shopBackendImage:require('@/assets/front-img/shop/banner.png')})`}">
    </div>
    <div class="docWidth warpper">
      <div class="bigTitle">店铺介绍</div>
      <div class="detail">
        <div v-html="shopInfo.shopRemark"></div>
      </div>
    </div>
    <div class="docWidth warpper">
      <div class="bigTitle">店铺信息</div>
      <div class="textBox">
        <el-row>
          <el-col :span="12">卖&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;家：{{shopInfo.companyName}}</el-col>
          <el-col :span="12">入驻时间：{{shopInfo.createTime | formatDate}}</el-col>
        </el-row>
        <el-row style="margin-top:20px;">
          <el-col :span="12">
            所&nbsp;在&nbsp;地：{{shopInfo.companyProvinceName}}{{shopInfo.companyCityName}}{{shopInfo.companyDistrictName}}
          </el-col>
          <el-col :span="12">注册资本：{{shopInfo.companyMoney}}万元</el-col>
        </el-row>
        <el-row style="margin-top:20px;">
          <!-- <el-col :span="12">联系电话：{{shopInfo.mobile}}</el-col> -->
          <el-col :span="12">经营范围：{{shopInfo.shopRange}}</el-col>
        </el-row>
      </div>
      <div class="countbox">
        <el-row>
          <el-col :span="6">成交数</el-col>
          <el-col :span="6">买家数</el-col>
          <el-col :span="6">交货周期</el-col>
          <el-col :span="6">退货率</el-col>
        </el-row>
        <el-row style="margin-top:12px;">
          <el-col :span="6" style="color:#965f29">{{shopInfo.shopDealNum}}</el-col>
          <el-col :span="6" style="color:#965f29">{{shopInfo.shopBuyerNum}}</el-col>
          <el-col :span="6" style="color:#965f29">{{shopInfo.shopDealDay}}</el-col>
          <el-col :span="6" style="color:#965f29">{{shopInfo.shopRefundRate}}</el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
export default {
  name: 'FrontShopInfo',
  filters: {
    formatDate(value) {
      if (!value) return ''
      return value.toString().split(' ')[0]
    }
  },
  data() {
    return {
      imgs: [],
      newsList: [],
      hotProduct: [],
      newProduct: []
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapState({
      shopId: state => state.front.shopId,
      shopInfo: state => state.front.shopInfo,
    })
  },
  created() {
    const shopId = this.$route.query && this.$route.query.id && Number(this.$route.query.id)
    if (this.$store.state.front.shopId !== shopId) {
      this.$store.commit("front/SET_SHOPID", shopId)
      this.$store.dispatch('front/getShopInfo', shopId)
    }
  },
  methods: {
  },
};
</script>
<style>
.shopInfo .detail img {
  max-width: 100%;
}
</style>
<style lang="scss" scoped>
.shopInfo {
  .banner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 328px;
  }
  .bigTitle {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    line-height: 38px;
    padding: 0 25px;
    background: #965f29;
  }
  .warpper {
    margin: 25px auto;
    border: 1px solid #e5e5e5;
    .detail {
      padding: 40px;
    }
    .textBox {
      padding: 35px 100px;
      border-bottom: 1px solid #e5e5e5;
    }
    .countbox {
      background: #f6f6f6;
      padding: 35px 140px;
    }
  }
}
</style>